// 在浏览器原生ES模块系统中，文件扩展名是必需的. 明确写明.js扩展名，避免浏览器自动补全错误
// 浏览器要求模块文件的Content-Type必须是application/javascript, 无扩展名时，服务器默认返回text/html
import MyButton from "../components/Button.js";
import {createHeader} from "../components/Header.js";
import Modal from "../components/Modal.js";

const header = createHeader('Hello');
const button = new MyButton('Click me').render();

button.addEventListener('click', () => {
    alert('Button clicked!');
});

// 创建弹窗实例
const modal = new Modal({
    title: '操作确认',
    content: '<p>确定要删除此项吗？</p>',
    buttons: [
        {
            text: '取消',
            type: 'cancel',
            handler: () => console.log('取消操作')
        },
        {
            text: '确定',
            type: 'confirm',
            handler: () => {
                console.log('执行删除操作');
                // 异步操作示例
                modal.setContent('<p>正在删除...</p>');
                setTimeout(() => {
                    modal.setContent('<p style="color:green">删除成功！</p>');
                    setTimeout(() => modal.close(), 1000);
                }, 1500);
            }
        }
    ]
});

document.body.append(header, button);

// 打开弹窗
var openBtn = document.getElementById('open-btn');
if (openBtn) {
    openBtn.addEventListener('click', () => modal.open());
}
